<template>
  <!-- 搜索框 -->
  <MyFilter
    :partParams="basicParams"
    :headList="headList"
    :selectedList="selectedList"
    @get-data="getData"
    @get-table-data="getTableData"
    @open-modal="openModal"
  />
  <!-- 表头 -->
  <HeadTable ref="headTable" :tableInfo="tableInfo" :list="headList" />
  <hr class="mt-3" />
  <!-- 列表 -->
  <MyTable class="mt-3" ref="table" :partParams="tableParams" :tableInfo="tableInfo" :list="list" @selection-change="selectionChange" />
</template>

<script lang="ts" setup>
import MyFilter from '../MyFilter.vue'
import MyTable from '../MyTable.vue'
import { computed, defineProps, ref } from 'vue'
import * as BasicApi from '@/api'
import { useMessage } from '@/hooks/useMessage'
import HeadTable from '../HeadTable.vue'
import { objectToQueryParams } from '@/utils/objectToQuery'

//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  data: {
    type: Object,
    default: () => ({ groupName: '', jobType: '' })
  }
})

const basicParams = computed(() => {
  return {
    groupName: props.data.groupName,
    jobType: props.data.jobType,
    operType: 'GetList'
  }
})

const tableParams = ref()

const headList = ref([])
const list = ref([])
const getList = async (query: any)=>{
  try {
    const post = {
      ...query,
      operType: 'GetInfo'
    }
    const inputStr = objectToQueryParams(post)
    const jsonData = [{ value: query.value }]
    const result = (await BasicApi.Query({ inputStr, jsonData })) as any
    const { code, msg, data } = result
    if (code !== 200) {
      message.error(msg)
      return
    }
    headList.value = data.headInfo ?? []
    list.value = data.listInfo ?? []
  } finally {
  }
}

const table = ref()
/** 查询列表 */
const getData = async (query: any) => {
  tableParams.value = JSON.parse(JSON.stringify(query))
  //渲染列表
  getList(query)
}

const tableInfo = ref([])
// 获取表格信息
const getTableData = (data: any) => {
  tableInfo.value = data
}

const message = useMessage()
//新增
const modalRef = ref()
const openModal = async () => {
  modalRef.value.open()
}

const selectedList = ref()
//触发选择框
const selectionChange = (list: any) => {
  selectedList.value = list
}
</script>
